<template>
  <div class="game-details">
    <div class="game-details-content">
      <div class="game-details-content-top">
        <gameItem class="application-box-introduce" :itemData="item"></gameItem>
      </div>
      <div class="game-details-content-center">
        <tabTitle titilText="游戏简介"></tabTitle>
        <picList :itemList="item.posters"> </picList>
        <div class="descript">
          {{ item.desc }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import gameItem from './components/gameItem.vue'
import tabTitle from './components/tabTitle.vue'
import picList from './components/picList.vue'
import { fetchBannerList, fetchGameInfo } from '@/api/game'

import { ref } from 'vue'

import { useRouter } from 'vue-router'

const router = useRouter()

let gameId = router.currentRoute.value.query.id

// 获取获取游戏详情

let item = ref([])
const getGameInfo = async () => {
  let postData = { game_id: gameId * 1 }
  console.log(postData)
  let data = await fetchGameInfo(postData)
  console.log(data, 'fetchGameInfo')
  item.value = data
}
getGameInfo()
// 获取首页banner（轮播图）列表
// let bannerListData = ref([])
// const getBannerList = async () => {
//   let data = await fetchBannerList({})
//   console.log(data, 'bannerListData')
//   bannerListData.value = data
// }
// getBannerList()
</script>
<style lang="scss" scoped>
.game-details {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #f6f6f6;
  font-weight: 300;
  font-size: 15px;
  .game-details-content {
    width: 1200px;
  }
  .game-details-content-top {
    background: #fff;
    padding: 20px 16px;
  }
  .game-details-content-center {
    background: #fff;
    padding: 20px 16px;
  }
  .game-details-content-center .descript {
    text-indent: 2em; /* 设置首行缩进为2em */
    margin-top: 20px;
    color: #73767a;
  }
}
</style>
